<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>未登录的个人中心</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/common.js"></script>
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/hammer.min.js"></script>
</head>

<body>
    <header class="percen-header" id="percen_header" style="width: 100%;">
        <span class="bg blur"><img src=""></span>
        <a href="login.html" title=""><h1 class="touxiang"><img src="img/login_touxiang.png" alt=""></h1></a>
        <h2 class="name">未登录</h2>
        <a href="login.html" title=""><span class="span-icon"><i class="fa fa-angle-right"></i></span></a>
    </header>
    <a href="login.html" title="">
        <div class="percen-news"><span class="news">我的消息</span></div>
    </a>
    <div class="percen-line">
    </div>
    <nav class="nav" id="nav">
        <ul class="fix">
            <li class="active">
                <span class="title">喜欢的攻略</span>
            </li>
            <li>
                <span class="title">喜欢的商品</span>
            </li>
        </ul>
    </nav>
    <div class="tab-qiehuan percen-base">
        <div class="wamp">
            <div class="unlogin-content">
                <h2 class="xin"><img src="img/unlogin_xin.png" alt=""></h2>
                <p class="shuoming">喜欢的攻略放在这里哦</p>
            </div>
        </div>
    </div>
    <div class="tab-qiehuan percen-base" style="display: none;">
        <div class="wamp">
            <div class="unlogin-content">
                <h2 class="xin"><img src="img/unlogin_xin.png" alt=""></h2>
                <p class="shuoming">喜欢的商品放在这里哦</p>
            </div>
        </div>
    </div>

    <script>
    $(document).ready(function() {
        // tab 切换
        var oNav = document.getElementById('nav');
        TabQieHuan(oNav);

        var oPercen_header = document.getElementById('percen_header'),
            oWidth = oPercen_header.offsetWidth,
            oHeight = oWidth / 2.5;
        oPercen_header.style.height = oHeight + 'px';
        $('.percen-header .bg img').attr('src', $('.percen-header .touxiang img').attr('src'));
        $('.percen-header .bg').css('height', oHeight - 16 + 'px');
        $('.percen-header .bg img').css('height', oHeight - 16 + 'px');

        function juzhong() { // 喜欢的礼物， 喜欢的攻略 垂直水平居中

            var bodyHeight = document.documentElement.clientHeight; // 窗口高度
            var baseHeight = bodyHeight - 40; // 固定高度
            var aBase = document.getElementsByClassName('percen-base');

            aBase[0].style.height = baseHeight + 'px';
            aBase[1].style.height = baseHeight + 'px';

            var aWamp = document.getElementsByClassName('wamp');
            var oTop = getTop(oNav) + 40;
            var scrollTop = document.body.scrollTop;

            var height = bodyHeight - oTop + scrollTop;
            aWamp[0].style.height = height + 'px';
            aWamp[1].style.height = height + 'px';
        }
        juzhong();
        window.addEventListener('scroll', function() {
            juzhong();
        }, false);
        window.addEventListener('resize', function() {
            juzhong();
        }, false);

    });
    </script>
</body>

</html>
